import type { Metadata } from 'next';
import Link from 'next/link';
import { notFound } from 'next/navigation';
import { requireUser } from '@/lib/auth/session';
import { getCollectionDetail, listCollections } from '@/lib/account/queries';
import { getDisplay } from '@/lib/account/display';
import { deleteCollectionAction, toggleCollectionPublicAction } from '@/lib/account/actions';
import { PageHeader, btnSecondary, btnDanger, btnPrimary } from '@/components/account/page-header';
import { SummaryStats, AllocationCards, ValueSourceBadge } from '@/components/account/portfolio-widgets';
import { LineChart } from '@/components/account/charts';
import { Card, CardHeader, Delta, EmptyState, Table, th, td, tdNum, Badge } from '@/components/ui/primitives';
import { fmtDate, fmtPct, confidenceLabel } from '@/lib/format';
import { EditCollectionForm } from '../create-form';
import { AddItemForm } from './add-item-form';

export const metadata: Metadata = { title: 'Collection', robots: { index: false } };

export default async function CollectionPage({ params, searchParams }: { params: Promise<{ id: string }>; searchParams: Promise<Record<string, string | undefined>> }) {
  const { id } = await params;
  const sp = await searchParams;
  const u = await requireUser(`/collections/${id}`);
  const detail = await getCollectionDetail(u.id, id);
  if (!detail) notFound();
  const d = await getDisplay();
  const { collection: c, summary: s, items, history } = detail;
  const others = (await listCollections(u.id)).filter((x) => x.collection.id !== id);
  const sort = sp.sort ?? 'value';
  const rows = [...s.items].sort((a, b) => {
    if (sort === 'gain') return (b.gainPct ?? -Infinity) - (a.gainPct ?? -Infinity);
    if (sort === 'name') return a.title.localeCompare(b.title);
    if (sort === 'recent') return (items.find((i) => i.id === b.id)?.createdAt.getTime() ?? 0) - (items.find((i) => i.id === a.id)?.createdAt.getTime() ?? 0);
    return (b.valueUsd ?? -1) - (a.valueUsd ?? -1);
  });
  const publicUrl = c.isPublic && u.handle && c.publicSlug ? `/u/${u.handle}/${c.publicSlug}` : null;

  return (
    <>
      <nav className="mb-2 text-xs text-muted">
        <Link href="/collections" className="hover:text-fg">
          Collections
        </Link>{' '}
        / <span className="text-fg">{c.name}</span>
      </nav>
      <PageHeader
        title={
          <span className="flex items-center gap-2">
            {c.color ? <span className="h-3 w-3 rounded-full" style={{ background: c.color }} /> : null}
            {c.name}
            {c.isPublic ? <Badge tone="index">public</Badge> : <Badge tone="neutral">private</Badge>}
          </span>
        }
        description={c.description ?? `${s.itemCount} item${s.itemCount === 1 ? '' : 's'} · created ${fmtDate(c.createdAt)}`}
        actions={
          <>
            <a href="#add" className={btnPrimary}>
              Add item
            </a>
            <Link href={`/collections/${id}/import`} className={btnSecondary}>
              Import CSV
            </Link>
            <Link href={`/collections/${id}/insurance`} className={btnSecondary}>
              Insurance schedule
            </Link>
            <a href={`/api/account/collections/${id}/export?format=csv`} className={btnSecondary}>
              CSV
            </a>
            <a href={`/api/account/collections/${id}/export?format=json`} className={btnSecondary}>
              JSON
            </a>
          </>
        }
      />
      <SummaryStats s={s} d={d} className="mb-5" />
      {s.valuedCount > 0 ? (
        <div className="mb-5 space-y-4">
          <Card>
            <CardHeader title="Value history" subtitle={history.length ? `${history.length} daily snapshots (value vs cost basis)` : 'Snapshots are recorded daily by the RareIndex worker'} />
            <div className="p-4">
              <LineChart series={[{ name: 'Value', points: history.map((h) => ({ date: String(h.date), value: h.valueUsd * d.rate })) }, { name: 'Cost basis', points: history.map((h) => ({ date: String(h.date), value: h.costBasisUsd * d.rate })), color: 'var(--ri-fg-subtle)', dashed: true }]} height={180} formatY={(v) => d.money(v / d.rate, { compact: true })} />
            </div>
          </Card>
          <AllocationCards s={s} d={d} />
        </div>
      ) : null}

      <Card className="mb-5">
        <CardHeader
          title="Items"
          subtitle={`${s.itemCount} item${s.itemCount === 1 ? '' : 's'} · ${s.unitCount} unit${s.unitCount === 1 ? '' : 's'}`}
          action={
            <div className="flex gap-1 text-xs">
              {[
                ['value', 'Value'],
                ['gain', 'Return'],
                ['recent', 'Recent'],
                ['name', 'Name'],
              ].map(([k, l]) => (
                <Link key={k} href={`?sort=${k}`} className={`rounded-sm px-2 py-1 ${sort === k ? 'bg-inset text-fg' : 'text-muted hover:text-fg'}`}>
                  {l}
                </Link>
              ))}
            </div>
          }
        />
        {rows.length === 0 ? (
          <EmptyState title="This collection is empty" description="Add an item below by searching the RareIndex asset universe, or import a CSV." />
        ) : (
          <Table>
            <thead>
              <tr>
                <th className={th}>Item</th>
                <th className={th}>Variant</th>
                <th className={`${th} text-right`}>Qty</th>
                <th className={`${th} text-right`}>Cost</th>
                <th className={`${th} text-right`}>Value</th>
                <th className={`${th} text-right`}>Gain</th>
                <th className={`${th} text-right`}>30d</th>
                <th className={th}>Source</th>
                <th className={th}></th>
              </tr>
            </thead>
            <tbody>
              {rows.map((i) => {
                const src = items.find((x) => x.id === i.id)!;
                return (
                  <tr key={i.id} className="hover:bg-sunken">
                    <td className={td}>
                      <div className="flex items-center gap-2.5">
                        {src.photos[0] || src.heroImageUrl ? (
                          // eslint-disable-next-line @next/next/no-img-element
                          <img src={src.photos[0] ?? src.heroImageUrl ?? ''} alt="" className="h-9 w-9 rounded-sm object-cover" />
                        ) : (
                          <span className="h-9 w-9 rounded-sm bg-inset" />
                        )}
                        <div className="min-w-0 max-w-[280px]">
                          <Link href={`/collections/${id}/items/${i.id}`} className="block truncate font-medium hover:underline">
                            {i.title}
                          </Link>
                          <p className="truncate text-[11px] text-subtle">
                            {i.categorySlug.replace(/_/g, ' ')}
                            {i.acquiredAt ? ` · acquired ${i.acquiredAt}` : ''}
                            {src.tags.length ? ` · ${src.tags.join(', ')}` : ''}
                          </p>
                        </div>
                      </div>
                    </td>
                    <td className={`${td} text-xs`}>{src.variantLabel ?? (i.grader ? `${i.grader.toUpperCase()} ${i.grade ?? ''}` : src.condition ?? '—')}</td>
                    <td className={tdNum}>{i.quantity}</td>
                    <td className={tdNum}>{i.costUsd === null ? <span className="text-subtle">—</span> : d.money(i.costUsd)}</td>
                    <td className={tdNum}>
                      {i.valueUsd === null ? <span className="text-subtle" title="No market evidence yet">—</span> : <span title={i.confidence !== null ? `Confidence ${confidenceLabel(i.confidence)}` : undefined}>{d.money(i.valueUsd)}</span>}
                    </td>
                    <td className={tdNum}>
                      <Delta value={i.gainPct} />
                    </td>
                    <td className={tdNum}>
                      <span className="text-xs">{fmtPct(i.change30d)}</span>
                    </td>
                    <td className={td}>
                      <ValueSourceBadge item={i} />
                    </td>
                    <td className={td}>
                      <Link href={`/collections/${id}/items/${i.id}`} className="text-xs text-muted hover:text-fg">
                        Edit
                      </Link>
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </Table>
        )}
      </Card>

      <div id="add" className="mb-5"><Card>
        <CardHeader title="Add an item" subtitle="Search the RareIndex asset universe, then record what you paid. Photos and notes can be added after saving." />
        <div className="p-4">
          <AddItemForm collectionId={id} />
        </div>
      </Card></div>

      <div className="grid gap-4 lg:grid-cols-2">
        <Card>
          <CardHeader title="Sharing" subtitle="Private by default. Public collections appear on your collector profile with values and photos — never purchase prices." />
          <div className="space-y-3 p-4 text-sm">
            <form action={toggleCollectionPublicAction} className="flex items-center gap-3">
              <input type="hidden" name="collectionId" value={id} />
              <label className="flex items-center gap-2">
                <input type="checkbox" name="public" defaultChecked={c.isPublic} className="h-4 w-4" />
                Make this collection public
              </label>
              <button className={btnSecondary}>Save</button>
            </form>
            {c.isPublic ? (
              publicUrl ? (
                <p className="text-xs text-muted">
                  Public at{' '}
                  <Link href={publicUrl} className="text-fg underline">
                    {publicUrl}
                  </Link>
                </p>
              ) : (
                <p className="text-xs text-alert">
                  Claim a public handle in{' '}
                  <Link href="/account/settings#handle" className="underline">
                    profile settings
                  </Link>{' '}
                  to get a shareable URL.
                </p>
              )
            ) : null}
          </div>
        </Card>
        <Card>
          <CardHeader title="Settings" />
          <div className="space-y-4 p-4">
            <EditCollectionForm collection={{ id: c.id, name: c.name, description: c.description, kind: c.kind, budgetUsd: c.budgetUsd, color: c.color }} />
            <div className="flex items-center justify-between border-t border-border pt-4">
              <p className="text-xs text-muted">
                {others.length ? `Move items to another collection from each item page.` : 'Create another collection to move items between them.'}
              </p>
              <form action={deleteCollectionAction}>
                <input type="hidden" name="collectionId" value={id} />
                <button className={btnDanger}>Delete collection</button>
              </form>
            </div>
          </div>
        </Card>
      </div>
    </>
  );
}